<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试通信方式A</title>
    <style>
        .iframe-container {
            border: 2px solid #e4e7ed;
            border-radius: 8px;
            overflow: hidden;
        }

        iframe {
            width: 100%;
            height: 500px;
            border: none;
        }

        pre {
            white-space: pre-wrap;
            font-family: 'Courier New', monospace;
            background: #f1f1f1;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #409EFF;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <h2>父窗口控制面板</h2>
            <div>
                <button id="getDataBtn">获取表单数据</button>
                <button id="resetFormBtn">重置表单</button>
                <button id="removeFormBtn">删除表单</button>
            </div>
            
            <div>
                <h3>获取的表单数据：</h3>
                <pre id="formDataDisplay">暂无数据</pre>
            </div>
            
        </div>
        
        <div>
            <h2>嵌入 (iframe)</h2>
            <div class="iframe-container">
                <iframe id="formFrame" src="./index.html"></iframe>
            </div>
        </div>
    </div>

    <script>
        // 父窗口逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const iframe = document.getElementById('formFrame')
            const getDataBtn = document.getElementById('getDataBtn')
            const resetFormBtn = document.getElementById('resetFormBtn')
            const removeFormBtn = document.getElementById('removeFormBtn')
            const formDataDisplay = document.getElementById('formDataDisplay')

            const actionMap = {
                // 侧边栏点击保存按钮时触发调用
                'onNodeSave': null,
                // 删除节点时触发调用
                'onNodeRemove': null
            }
            
            // 父级注册方法
            window.TreeComponentApi= {
                registerAction: (actionKey, funName) => {
                    if(actionMap.hasOwnProperty(actionKey) && funName) {
                        actionMap[actionKey] = funName
                    } else {
                        console.log(`${actionKey} 该方法不支持注册`)
                    }
                }
            }
           
            // 获取表单数据按钮点击事件
            getDataBtn.addEventListener('click', function() {
                // 方式3 子窗口注册的都是方法的名称，非方法本身，使用 eval() 转成方法体
                if(actionMap.onNodeSave) {
                    const childContentFun =  eval(iframe.contentWindow[actionMap.onNodeSave])
                    if(typeof childContentFun === 'function' && childContentFun.constructor.name === "AsyncFunction") {
                        childContentFun().then((result) => {
                            if(result) {
                                // 表单验证成功时返回表单数据
                                formDataDisplay.textContent = result
                            } else {
                                // 表单验证失败时返回空内容
                                formDataDisplay.textContent = '获取表单数据为空'
                            }
                        }).catch((err) => {
                            console.log(err)
                        })
                    }
                }
            })

            // 删除表单按钮点击事件
            removeFormBtn.addEventListener('click', function() {
                // 方式3 子窗口注册的都是方法的名称，非方法本身，使用 eval() 转成方法体
                if(actionMap.onNodeRemove) {
                    const childContentFun =  eval(iframe.contentWindow[actionMap.onNodeRemove])
                    if(typeof childContentFun === 'function' && childContentFun.constructor.name === "AsyncFunction") {
                        childContentFun().then((result) => {
                            if(result) {
                                // 表单验证成功时返回表单数据
                                formDataDisplay.textContent = `删除节点：${result}`
                            } else {
                                // 表单验证失败时返回空内容
                                formDataDisplay.textContent = '获取表单数据为空'
                            }
                        }).catch((err) => {
                            console.log(err)
                        })
                    }
                }
            })

            /* 
            // 父级注册方法
            window.TreeComponentApi = {
                // 保存子窗口表单数据方法 (自定义树组件中提供)
                "onNodeSave":null,
                // 子窗口表单重置方法 (本地测试使用)
                "resetForm": null,
                // 子窗口删除表单方法 返回模板集编码 (本地测试使用)
                "removeFormData": null
            }
             
            // 获取表单数据按钮点击事件
            getDataBtn.addEventListener('click', function() {
                // const childApi = iframe.contentWindow.registerChildApi // 方式1 直接获取子窗口的方法
                const childApi =  window.TreeComponentApi // 方式2 获取子窗口注册的方法
                
                if(childApi && childApi.onNodeSave && typeof childApi.onNodeSave === 'function'&& childApi.onNodeSave.constructor.name === "AsyncFunction") {
                    childApi.onNodeSave().then((result) => {
                        if(result) {
                            // 表单验证成功时返回表单数据
                            formDataDisplay.textContent = result
                        } else {
                            // 表单验证失败时返回空内容
                            formDataDisplay.textContent = '获取表单数据为空'
                        }
                    }).catch((err) => {
                        console.log(err)
                    })
                }
            })
            
            // 重置表单按钮点击事件
            resetFormBtn.addEventListener('click', function() {
                // const childApi = iframe.contentWindow.registerChildApi // 方式1 直接获取子窗口的方法
                const childApi =  window.TreeComponentApi // 方式2 获取子窗口注册的方法

                if(childApi && childApi.onResetForm && typeof childApi.onResetForm === 'function') {
                    childApi.onResetForm()
                }
                formDataDisplay.textContent = '暂无数据'
            })

            // 删除表单按钮点击事件
            removeFormBtn.addEventListener('click', function() {
                // const childApi = iframe.contentWindow.registerChildApi // 方式1 直接获取子窗口的方法
                const childApi =  window.TreeComponentApi // 方式2 获取子窗口注册的方法

                if(childApi && childApi.onRemoveFormData && typeof childApi.onRemoveFormData === 'function') {
                    const id = childApi.onRemoveFormData()
                    console.log('父级获取到的id:', id)
                }
                formDataDisplay.textContent = '暂无数据'
            })
            */
        })
    </script>
</body>
</html>